<template>
  <!-- 一屏展示首页 -->
  <div id="oneScreenDisplay">
    <div id="left">
        <dataStatistics></dataStatistics>
        <publicPraise></publicPraise>
        <patrolTheRiver></patrolTheRiver>
        
    </div>
    <div id="middle">
        <mapp></mapp>
        <swiper></swiper>
        <riverPatrolRecord></riverPatrolRecord>
        <realTimeWaterLevel></realTimeWaterLevel>
    </div>
    <div id="right">
         <weather></weather>
         
         <management></management>

         <reportingType></reportingType>
    </div>
  </div>
</template>

<script>
import dataStatistics from './dataStatistics.vue'
import publicPraise from './publicPraise.vue'
import patrolTheRiver from './patrolTheRiver.vue'
import riverPatrolRecord from './riverPatrolRecord.vue'
import weather from './weather.vue'
import reportingType from './reportingType.vue'
import realTimeWaterLevel from './realTimeWaterLevel.vue'
import management from './management.vue'
import mapp from './mapp.vue'
import swiper from './swiper.vue'

export default {
  name: 'index',
  data () {
    return {
    }
  },
  components:{
    dataStatistics,
    publicPraise,
    patrolTheRiver,
    riverPatrolRecord,
    weather,
    reportingType,
    realTimeWaterLevel,
    management,
    mapp,
    swiper,
  }
}
</script>

<style scoped>
  #oneScreenDisplay{
    width:100vw;
    height:100vh;
    background: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display:flex;
    justify-content: space-around;
    }
    #left{
        width:24vw;
        height:100%;
        display:flex;
        flex-wrap:wrap;
        flex-direction: column;
        justify-content: space-between;
        padding:1.8vh 0 4.6vh 0;
    }
    #middle{
        width:49.6vw;
        height:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding:0 0 2.7vh 0;
    }
    #right{
        width:24.2vw;
        height:100%;
        display:flex;
        flex-wrap:wrap;
        flex-direction: column;
        justify-content: space-between;
        padding:1.8vh 0 4.6vh 0;
    }
</style>
